<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Simple Monaco Diff Test</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        background: #1e1e1e;
      }
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script src="/monaco-editor/vs/loader.js"></script>
    <script>
      require.config({ paths: { vs: '/monaco-editor/vs' } });

      require(['vs/editor/editor.main'], function () {
        // Create original content
        const originalText = `function hello() {
    console.log("Hello World");
}`;

        // Create modified content
        const modifiedText = `function hello() {
    console.log("Hello VibeTunnel!");
    return true;
}`;

        // Create the diff editor
        const diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
          theme: 'vs-dark',
          automaticLayout: true,
          renderSideBySide: true,
          ignoreTrimWhitespace: false,
          renderIndicators: true,
          originalEditable: false,
          diffAlgorithm: 'advanced',
        });

        // Set the models
        const originalModel = monaco.editor.createModel(originalText, 'javascript');
        const modifiedModel = monaco.editor.createModel(modifiedText, 'javascript');

        diffEditor.setModel({
          original: originalModel,
          modified: modifiedModel,
        });

        // Log some debug info
        console.log('Diff editor created');
        console.log('Original content:', originalText);
        console.log('Modified content:', modifiedText);

        // Check for changes after a delay
        setTimeout(() => {
          const lineChanges = diffEditor.getLineChanges();
          console.log('Line changes:', lineChanges);
        }, 1000);
      });
    </script>
  </body>
</html>
